// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

// 数据类型：number，string,boolean,undefined,null
// 复杂数据类型：array,object,function

//react表达式
const age = 18; //number
const name = '张三'; //string
const boolean = true; //string

// 数组
const list = [<div>111</div>, <div>222</div>, <div>33</div>];
// 对象
const person = {
  type: '悟空',
  props: {
    name: '悟空2',
    age: 18,
  },
};
// 函数
const handler = () => {
  return 1233;
};

// react是通过一个{}渲染
const divNode = (
  <div>
    <div>{age}</div>
    <div>{name}</div>
    {/* boolean,undefined,null */}
    <div>{String(boolean)}</div>
    <div>{undefined}</div>
    <div>{null}</div>

    <div>{list}</div>

    <div>{person.type}</div>
    <div>{handler()}</div>
  </div>
);

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(divNode);
